<template>
  <div id="app" class="layout" :class="{sysbgc:isNew,sysbgc2:noMenu,loginpage:isLogin}">
    <header-bar v-if="!isNew" @changeMenu="changeMenuTitle()"></header-bar>
    <menu-bar v-if="!isNew" @changeMenu="changeMenuTitle()"></menu-bar>
    <section v-if="!isNew">
      <router-view></router-view>
    </section>
    <sys-header v-if="isNew&&!isLogin"></sys-header>
    <sys-menu v-if="isNew&&!isLogin&&!noMenu"></sys-menu>
    <router-view v-if="isNew"></router-view>
  </div>
</template>
<script>
  import HeaderBar from '@/components/layout/Header'
  import MenuBar from '@/components/layout/MenuBar'
  import SysHeader from '@/components/layout/SysHeader'
  import SysMenu from '@/components/layout/SysMenu'

  require('animate.css')
  require('@/assets/css/custom.css')
  require('@/assets/css/ele-ui/index.css')
  export default {
    data() {
      return {
        activeTab: 'tab1',
        activeList: 'list1'
//        isCollapse: false,
      }
    },
    computed: {
      isNew: function () {
        if (this.$route.meta.new) {
//        if (this.$route.path !== '/face/detect' && this.$route.path !== '/face/verify') {
          return true
        } else {
          return false
        }
      },
      noMenu: function () {
        if (this.$route.meta.nomenu) {
          return true
        } else {
          return false
        }
      },
      isLogin: function () {
        return this.$route.meta.login
      },
      webtitle: function () {
        return this.$route.name
      }
    },
    watch: {
      webtitle(val) {
        console.log(this.$route.name)
        document.title = '人脸识别 - ' + val
      }
    },
    methods: {},
    mounted() {
      document.title = '人脸识别 - ' + this.$route.name
    },
    components: {
      HeaderBar,
      MenuBar,
      SysHeader,
      SysMenu
    }
  }
</script>
